fixed the search bar and search icon alignments in the navbar search box#797
fixed the search bar and search icon alignments in the navbar search box#797Prthmsh7 wants to merge 2 commits intokeploy:mainfrom
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Signed-off-by: Prathmesh Shukla <Prathmeshshukla2106@gmail.com>
Prthmsh7
force-pushed
the
fixed-search-bar
branch
from
c5202f3 to
bfe2410
Compare
amaan-bhati
left a comment
amaan-bhati
left a comment
There was a problem hiding this comment.
Hey @Prthmsh7
Thanks for raising this and trying to help us improve. The ui for the search bar was earlier improved more or less, in this pr, i think the changes would only be reelvant for the mobile ui, since the ui of the updated docs nav search input looks good now and isnt breaking anymore.
amaan-bhati
left a comment
amaan-bhati
left a comment
There was a problem hiding this comment.
Thank you for improving the search bar alignment! Consistent UI polish in a docs site matters a lot for first impressions, and the before screenshots clearly show the misalignment issue that needed fixing.
Issues to be Considered:
-
The PR includes before screenshots but no after screenshots. Please add after screenshots showing the fixed state across at least one light-theme and one dark-theme view - this is the most important missing piece for reviewers to assess the change without running the site locally.
-
The updated CSS targets DocSearch internal class names (
.DocSearch-Button,.DocSearch-Button-Placeholder,.DocSearch-Button-Keys,.DocSearch-Modal, etc.). These are not part of the Docusaurus public API and can change when the@docsearch/reactpackage is updated. Please note which version of DocSearch these overrides were written against so maintainers know when to re-audit the CSS. -
The
height: 44pxhardcoded on.DocSearch-Buttonmay not scale well at smaller breakpoints. Please verify the search button renders correctly on mobile viewports (typically below 768px), especially since the button layout and placeholder text may be hidden at certain breakpoints by DocSearch's own responsive styles. -
There is an indentation inconsistency in the first rule: the
@apply rounded-lg !important;line is indented with one space while the surrounding declarations use two spaces. This is a minor formatting point but keepingcustom.cssconsistent avoids noisy diffs in future edits. -
Please confirm the fix has been tested in both light and dark theme modes, as the box-shadow on focus/hover (
var(--ifm-color-primary)) may behave differently across themes.
After screenshots and a quick mobile + dark-mode check are the key items here before this is ready to merge.
2 participants
What has changed?
This PR improves the alignment and visual consistency of the DocSearch button (navbar search box) and the DocSearch modal panel.
before:
Type of change
How Has This Been Tested?
outputs :
Checklist: